<template>
    
        <!-- 头部面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="(item, index) in breadcrumbLists" :to="item.path" :key="index">
                {{ item.name }}
            </el-breadcrumb-item>
        </el-breadcrumb>

</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, watch } from "vue"

import { useRoute } from "vue-router";
const route = useRoute()
// console.log(route.matched);

let breadcrumbLists: any = ref([])
const initBreadcrumbLists = () => {
    breadcrumbLists.value = route.matched
}

// initBreadcrumbLists()

watch(
    route,
    () => {
        initBreadcrumbLists()
    },
    {
        immediate: true,
        deep: true
    }
)



</script>

<style scoped>
.el-breadcrumb {
    /* padding-top:15px; */
    margin-left: 162px;
    /* background-color: #fff; */
    height: 20px;
    color: black;
}
</style>